<!--
	易损性数据分省统计
	Created by Penglei on 2023/08/10
-->
<template>
	<div id="echartsRef" ref="echartsRef" class="echats-box"></div>
</template>

<script setup name="AccessStatistics">
// 引入echats
import * as echarts from 'echarts';
import { onMounted, onUnmounted, defineEmits } from 'vue';
// 引入接口
import { getProvincialStatisticsApi } from '@/api/vulnerability'

// 调用父组件事件
const emit = defineEmits();

// 所有省份数据
let arrAllProvince = [];
// 当前索引
let curIndex = ref(0);
// 切换时间间隔
const interval = 10000;
// 定时器
let timer = null;
// 是否开启定时器，先关闭，阻止滚动
const openTimer = true;

// 图表
let myChart = null;
// 渲染图表
const renderChart = (data) => {
	if (!myChart) {
		myChart = echarts.init(document.getElementById('echartsRef'));
	}
	// 数据
	let dataAxis = [];
	// 重大工程数据
	let arrMajor = [];
	// 生命线数据
	let arrLifeline = [];
	// 遍历设置数据
	if (data && data.length) {
		data.reverse().map((item, index) => {
			// 测试图表坐标轴y的文本宽度
			// if(index == data.length - 1){
			// 	item.province = '内蒙古自治区'
			// }
			dataAxis.push(item.province);
			arrMajor.push(item.projectNum);
			arrLifeline.push(item.sum);
		})
	}
	// 配置项
	const option = {
		title: {
			show: false
		},
		// 提示
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
		// 图例
		legend: {
			right: 20,
			align: 'left',
			itemWidth: 6,
			itemHeight: 6,
			itemGap: 30,
			textStyle: {
				fontSize: 14,
				color: '#FFFFFF',
			},
		},
		xAxis: {
			type: 'value',
			axisLine: {
				show: false,
			},
			axisLabel: {
				inside: false,
				fontSize: 14,
				color: '#999999',
			},
			splitLine: {
				lineStyle: {
					type: 'dashed',
					color: '#475ADB80'
				}
			}
		},
		yAxis: {
			type: 'category',
			data: dataAxis,
			// 不显示线条和刻度
			axisLine: {
				show: true,
				color: '#999999',
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				inside: false,
				fontSize: 14,
				margin: 11,
				color: '#FFFFFF',
				// align: 'right',
			},
			splitLine: {
				show: false,
			}
		},
		grid: {
			show: false,
			left: '28%',
			right: '10%',
			top: 30,
			bottom: 30,
		},
		// 数据缩放
		dataZoom: [
			{
				show: true,
				// 开始值
				startValue: arrAllProvince.length,
				// 结束值，显示6个数据
				endValue: arrAllProvince.length - 5 > 0 ? arrAllProvince.length - 5 : 0,
				type: 'inside',
				yAxisIndex: 0,
				filterMode: 'empty',
			}
		],
		series: [
			{
				name: '重大工程',
				type: 'bar',
				barWidth: '8',
				showBackground: false,
				backgroundStyle: {
					borderRadius: [0, 5, 5, 0], //（顺时针左上，右上，右下，左下）
				},
				itemStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
						{ offset: 0, color: '#0775FE' },
						{ offset: 1, color: '#46FFFF' }
					]),
					barBorderRadius: [0, 5, 5, 0], //（顺时针左上，右上，右下，左下）
				},
				label: {
					show: true,
					color: '#46FFFF',
					position: 'right',
				},
				data: arrMajor
			},
			{
				name: '生命线',
				type: 'bar',
				barWidth: '8',
				showBackground: false,
				backgroundStyle: {
					borderRadius: [0, 5, 5, 0], //（顺时针左上，右上，右下，左下）
				},
				itemStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
						{ offset: 0, color: '#FFB35B' },
						{ offset: 1, color: '#FF8114 ' }
					]),
					barBorderRadius: [0, 5, 5, 0], //（顺时针左上，右上，右下，左下）
				},
				label: {
					show: true,
					color: '#FF8114',
					position: 'right',
				},
				data: arrLifeline
			}
		]
	};
	// 渲染
	option && myChart.setOption(option);
	// 点击事件
	myChart.on('click', function (params) {
		// 切换省份
		// emit('onChangeProvince', params.name);
		// 判断是否开启定时器
		if (openTimer) {
			// 关闭定时器
			colseInterval();
			// 更新索引重新开启定时
			curIndex.value = params.dataIndex;
			// 定时切换
			timedSwitching();
		}
	});
	// 判断是否开启定时器
	if (openTimer) {
		// 定时切换
		timedSwitching();
	}
}
// 定时切换
const timedSwitching = () => {
	timer = setInterval(() => {
		// 索引设置
		curIndex.value--;
		if (curIndex.value <= 0) {
			curIndex.value = arrAllProvince.length;
		}
		// 当前省份切换
		// if (arrAllProvince[curIndex.value] && arrAllProvince.length - 4 < curIndex.value) {
		// 	emit('onChangeProvince', arrAllProvince[curIndex.value].province || '');
		// }
		// 6条数据以上滚动, 最后6条不滚动
		if (arrAllProvince.length > 6 && curIndex.value >= 5) {
			// 切换图表缩放区域
			myChart.dispatchAction({
				type: 'dataZoom',
				// 可选，dataZoom 组件的 index，多个 dataZoom 组件时有用，默认为 0
				dataZoomIndex: 0,
				// 开始位置的数值
				startValue: curIndex.value,
				// 结束位置的数值, 每次显示6个数据
				endValue: curIndex.value - 5,
			})
		}
	}, interval)
}
// 关闭定时器
const colseInterval = () => {
	clearInterval(timer);
	timer = null;
}

// 加载数据
const getData = () => {
	getProvincialStatisticsApi().then(res => {
		const { code, data } = res;
		if (code == 200 && data) {
			// 所有数据
			arrAllProvince = [
				...data,
			];
			// 当前索引
			curIndex.value = arrAllProvince.length;
			// 渲染图表
			renderChart(arrAllProvince);
			// 当前省份切换
			// if (arrAllProvince.length) {
			// 	emit('onChangeProvince', arrAllProvince[arrAllProvince.length - 1].province || '');
			// }
		}
	}).catch(err => {
		console.log(err.message);
	})
}
// 挂载完成
onMounted(() => {
	// 加载数据
	getData();
})
// 卸载后
onUnmounted(() => {
	// 关闭定时器
	colseInterval();
});
</script>

<style lang="scss" scoped>
.echats-box {
	width: 100%;
	height: 320px;
}
</style>